<template>
	<view class="main-box">
		<view class="navigator-bar" :style="style">
			<image class="back-img" src="/static/backArrow2.png" @click="back()"></image>
			<text class="page-title">关于我们</text>
		</view>
		<image class="logo-img" src="/static/loginPic.png"></image>
		<text class="version-text">V 1.0.0</text>
		<view class="like-button" @click="like()">喜欢我们</view>
		<text class="clause-box">BOOM服务条款<text class="clause-text">与</text>隐私政策</text>
		<text class="copyright-text">版权所有 2021 南京BOOM信息技术</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				style: 'margin-top: 0px;'
			};
		},
		onLoad() {
			this.style = `margin-top: ${this.$safeTop}px`;
		},
		methods: {
			like() {
				uni.showToast({
					title: '感谢您的喜欢和支持!',
					icon: 'none'
				})
			},
			back() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		height: 100vh;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.navigator-bar {
			width: 100vw;
			height: 86rpx;
			display: flex;
			justify-content: flex-start;
			
			.back-img {
				width: 24rpx;
				height: 40rpx;
				margin-left: 42rpx;
				z-index: 999;
			}
			
			.page-title {
				font-size: 38rpx;
				font-weight: bold;
				color: #222222;
				position: absolute;
				width: 100vw;
				line-height: 38rpx;
				text-align: center;
			}
		}
		
		.logo-img {
			width: 240rpx;
			height: 220rpx;
			margin-top: 175rpx;
		}
		
		.version-text {
			font-size: 38rpx;
			font-weight: bold;
			color: #222222;
			margin-top: 31rpx;
		}
		
		.like-button {
			width: 384rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 48rpx;
			border: 2rpx solid #FF5E2E;
			margin-top: 500rpx;
			font-size: 31rpx;
			font-weight: bold;
			color: #FF5E2E;
			line-height: 96rpx;
			text-align: center;
		}
		
		.clause-box {
			font-size: 27rpx;
			font-weight: 400;
			color: #FF5E2E;
			margin-top: 119rpx;
			
			.clause-text {
				color: #999999;
			}
		}
		
		.copyright-text {
			font-size: 27rpx;
			font-weight: 400;
			color: #222222;
			margin-top: 31rpx;
		}
	}
</style>
